<!-- 随访服务记录-------------------------------- -->
<template>
	<view class="card-list">
		<view class="card-box">

			<view class="service-state" :style="{ color: statedataColor(numberDate.state).color }">
				<text>{{ statedataColor(numberDate.state).name }}</text>
			</view>
			<view class="card-left">
				<view class="card-btn">
					<text class="service-title">{{numberDate.doctorId?.name}}</text>
					<button class="payment-tag"> {{numberDate.place||'找不到'}}</button>
				</view>
				<view class="service-time">
					<text>服务时间：{{numberDate.updateTime}}</text>
				</view>
				<view class="service-assess">服务评价：
					<!-- 插入组件引入 -------------- -->
					<text class="rating"><rate-star :rating="numberDate.doctorId.rate"></rate-star></text>
				</view>
			</view>
			<view class="card-right">
				<image src="/static/arrow-right.png" class="card-right-icon"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useUserStore
	} from '../../../store/user';
	import {
		useContractStore
	} from '../../../store/contract';
	// 状态的数组显示颜色变化
	const statedata = ref([{
			id: 0,
			name: '已驳回',
			color: '#FA746B'
		},
		{
			id: 1,
			name: '待审核',
			color: '#28D094'
		},
		{
			id: 2,
			name: '待服务',
			color: '#FDDB78'
		},
		{
			id: 3,
			name: '已完成',
			color: '#000000'
		},
		{
			id: 4,
			name: '已取消',
			color: '#CCCCCC'
		}
	]);
	// 获取动态的颜色
	const statedataColor = (stateId) => {
		const status = statedata.value.find(item => item.id === Number(stateId));
		return status || {
			name: `未知(${stateId})`,
			color: '#FF0000'
		};
	};
	const numberDate = ref({})
	// 获取用户状态机
	const userStore = useUserStore();
	//获取签约状态机
	const contractStore = useContractStore();
	//服务包信息
	onMounted(() => {
		if (contractStore.contractDetail) {
			numberDate.value = {
				...contractStore.contractDetail
			};
			console.log("numberDate:", numberDate.value);
		}
	});
	// // 接收服务项ID
	// const serviceItemId = ref('');
	// onLoad((options) => {
	// 	console.log('接收到的参数:', options)
	// 	if (contractStore.contractDetail) {
	// 		numberDate.value = {
	// 			...contractStore.contractDetail,
	// 			servicePackId: contractStore.contractDetail.servicePackId,
	// 			doctorId: contractStore.contractDetail.doctorId
	// 		}
	// 	}

	// 	console.log('渲染数据:', numberDate.value)
	// })
</script>

<style scoped lang="scss">
	.card-list {
		padding: 10rpx 40rpx;
	}

	.card-box {
		width: 100%;
		height: auto;
		min-height: 230rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.service-state {
		color: #000;
		font-size: 24rpx;
		padding-bottom: 16rpx;
		margin-bottom: 16rpx;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.card-left {
		display: flex;
		flex-direction: column;
		gap: 12rpx;

		.card-btn {
			display: flex;
			align-items: center;
			margin-right: 5rpx;
		}

		.service-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.payment-tag {
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			background-color: #FA746833;
			color: #FA7468;
			border: none;
		}

		.service-time {
			font-size: 28rpx;
			color: #666;
		}

		.service-assess {
			font-size: 28rpx;
			color: #666;
			display: flex;
			align-items: center;

			.rating {
				color: #FFC107;
			}
		}
	}

	.card-right {
		position: absolute;
		right: 20rpx;
		top: 50%;

		.card-right-icon {
			width: 36rpx;
			height: 36rpx;
		}
	}
</style>